<template>
  <div class="infor">
    <section class="infor-block">
      <p>企业名称：{{ baseInfo.tenantName || '--' }}</p>
      <p>统一信用代码：{{ baseInfo.uscCode || '--' }}</p>
    </section>
    <section class="infor-block">
      <div class="infor-block__container mb30">
        <p v-if="baseInfo.businessLicenseUrl" class="mb10">营业执照：</p>
        <img v-if="baseInfo.businessLicenseUrl" class="photo" :src="baseInfo.businessLicenseUrl" alt="" />
        <div class="infor-block__container--btns" v-if="baseInfo.businessLicenseUrl">
          <span @click="preview(baseInfo.businessLicenseUrl)">预览</span>
          <a :href="baseInfo.businessLicenseUrl" download>下载</a>
        </div>
        <p v-else class="mb10">营业执照：--</p>
      </div>
      <div class="infor-block__container mb30">
        <p class="mb10">公司章程：--</p>
        <!-- <img class="photo" src="@/assets/logo.png" alt="" />
        <div class="infor-block__container--btns">
          <span>预览</span>
          <span>下载</span>
        </div> -->
      </div>
      <div class="infor-block__container mb30">
        <p class="mb10">征信授权书(企业)：--</p>
        <!-- <img class="photo" src="@/assets/logo.png" alt="" />
        <div class="infor-block__container--btns">
          <span>预览</span>
          <span>下载</span>
        </div> -->
      </div>
      <div class="infor-block__container mb30">
        <p class="mb10">征信授权书(个人)：--</p>
        <!-- <img class="photo" src="@/assets/logo.png" alt="" />
        <div class="infor-block__container--btns">
          <span>预览</span>
          <span>下载</span>
        </div> -->
      </div>
      <div class="infor-block__container">
        <p class="mb10">当前财务报表：--</p>
        <!-- <img class="file-icon" src="@/assets/logo.png" alt="" />
        <div class="infor-block__container--btns">
          <span>预览</span>
          <span>下载</span>
        </div> -->
      </div>
      <div class="infor-block__container">
        <p class="mb10">当季财务报表：--</p>
        <!-- <img class="file-icon" src="@/assets/logo.png" alt="" />
        <div class="infor-block__container--btns">
          <span>预览</span>
          <span>下载</span>
        </div> -->
      </div>
      <div class="infor-block__container">
        <p class="mb10">发票信息：--</p>
        <!-- <img class="file-icon" src="@/assets/logo.png" alt="" />
        <div class="infor-block__container--btns">
          <span>预览</span>
          <span>下载</span>
        </div> -->
      </div>
    </section>
  </div>
</template>

<script>
export default {
  name: 'BaseInfo',
  props: {
    baseInfo: Object,
  },
  data() {
    return {}
  },
  methods: {
    preview(url) {
      window.open(url, '__blank')
    },
  },
}
</script>

<style lang="scss" scoped>
.infor {
  font-size: $f-s-16;
  color: $gray;
  &-block {
    @include flex();
    margin-bottom: 40px;
    flex-wrap: wrap;
    > p {
      width: 50%;
    }
    &__container {
      width: 25%;
      &--btns {
        cursor: pointer;
        width: 101px;
        text-align: center;
        font-size: $f-s-12;
        color: $blue;
        > span {
          border-bottom: 1px solid $blue;
          margin-right: 10px;
        }
        > a {
          text-decoration: none;
          color: $blue;
          border-bottom: 1px solid $blue;
        }
      }
    }
  }
  .photo {
    width: 101px;
    height: 101px;
    margin-bottom: 6px;
  }
  .file-icon {
    width: 60px;
    height: 60px;
    margin-bottom: 6px;
  }
}
</style>
